<template>
  <van-popup v-model:show="showPopup" closeable round>
    <div class="code-sign">
      <van-divider
        :style="{
          width: '128px',
          color: '#000',
          borderColor: '#000',
          fontSize: '17px',
          fontWidth: '700',
          margin: '0'
        }"
      >
        <span class="face-title">签署校验</span>
      </van-divider>
      <div class="face-content">
        <span class="fece-one">请确认本人操作</span>
        <span class="fece-twe">校验成功后即可完成文件签署</span>
      </div>
      <van-form ref="formRef" class="form-name" @submit="onSubmit">
        <div class="form-cell">
          <van-field
            class="form-mobile"
            v-model="userForm.mobile"
            name="mobile"
            center
            readonly
          />
          <van-field
            class="form-password"
            v-model="userForm.vcode"
            name="vcode"
            placeholder="请输入验证码"
            maxlength="6"
            center
            :rules="[{ required: true, message: '请填写密码' }]"
          >
            <template #button>
              <van-count-down
                v-if="isCountDownShow"
                :time="countDown * 1000"
                format="ss s"
                @finish="isCountDownShow = false"
              />
              <van-button
                v-else
                class="code-btn"
                native-type="button"
                size="small"
                type="default"
                @click="sendCodeClick"
                >获取验证码</van-button
              >
            </template>
          </van-field>
        </div>
        <van-button
          class="cancel-btn"
          native-type="button"
          @click="showPopup = false"
        >
          取消
        </van-button>
        <van-button class="confirm-btn" native-type="submit"> 确定 </van-button>
      </van-form>
    </div>
  </van-popup>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { useStore } from '@/store'
// 方法
import { getSendCode } from '@/api/login'
import { FormInstance } from 'vant'

export default defineComponent({
  emits: ['codeSignClick'],
  setup(props, { emit }) {
    const store = useStore()
    const showPopup = ref(false)
    const showCodeSignPopup = () => {
      showPopup.value = true
    }
    // 表单验证
    const userForm = reactive({
      mobile: '',
      vcode: '',
      randomCode: 0
    })
    userForm.mobile = store.state.login.userInfo.mobile
    // 短信签
    const onSubmit = () => {
      emit('codeSignClick', {
        vcode: userForm.vcode,
        randomCode: userForm.randomCode
      })
    }

    // 发送验证码
    const isCountDownShow = ref(false)
    const countDown = ref(0)
    const formRef = ref<FormInstance>()
    const sendCodeClick = async () => {
      try {
        await formRef.value?.validate('mobile')
      } catch (error) {
        return error
      }
      userForm.randomCode = new Date().getTime()
      const params = {
        mobile: userForm.mobile,
        randomCode: userForm.randomCode
      }
      const res = await getSendCode(params)
      if (res.code !== '0') return
      countDown.value = Math.floor((res.data - new Date().getTime()) / 1000)
      isCountDownShow.value = true
    }

    return {
      formRef,
      showPopup,
      userForm,
      isCountDownShow,
      countDown,
      showCodeSignPopup,
      onSubmit,
      sendCodeClick
    }
  }
})
</script>

<style scoped lang="less">
.code-sign {
  width: 278px;
  height: 256px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  .face-title {
    font-size: 17px;
    font-weight: 700;
  }
  .face-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    .fece-one {
      font-size: 15px;
      color: #000;
      padding-bottom: 10px;
    }
    .fece-twe {
      font-size: 13px;
      color: #a5a5a5;
    }
  }
  .form-name {
    width: 100%;
    .form-cell {
      padding: 0 16px;
      .form-mobile {
        height: 42px;
        background-color: #f2f2f2;
        margin-bottom: 12px;
        border: 1px solid #f5f5f5;
        border-radius: 4px;
        font-size: 15px;
      }
      .form-password {
        height: 42px;
        border: 1px solid #f5f5f5;
        border-radius: 4px;
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 0;
        font-size: 15px;
        .code-btn {
          width: 95px;
          height: 20px;
          font-size: 15px;
          vertical-align: middle;
          border-width: 0;
          border-left: 1px solid #f5f5f5;
          color: #666666;
        }
      }
    }
    .cancel-btn {
      height: 42px;
      width: 50%;
      border-top: 1px solid #f5f5f5;
      border-right: none;
      font-size: 16px;
    }
    .confirm-btn {
      height: 42px;
      width: 50%;
      border-top: 1px solid #f5f5f5;
      font-size: 16px;
      color: #2489f2;
    }
  }
}
</style>
